$(function() {

    'use strict';

    // 侧边导航栏对象
    var sideNav = {

        _isOpen    : true,
        _listEls   : $('.mgr-sidenav-area li'),
        _tipEl     : $('.mgr-sidenav-area .mgr-tip'),
        _tipTextEl : $('.mgr-sidenav-area .mgr-tip span'),

        _doSwitch: function(isOpen) {

            var els = $('.mgr-sidenav-area, .mgr-page-area');

            if (this._isOpen !== isOpen) {
                (this._isOpen = isOpen) && els.removeClass('min') ||
                        els.addClass('min');
                this._listEls.removeClass('show');
            }

            this._tipEl.hide();

            return this;
        },

        _fixTip: function(el) {

            this._tipTextEl.html(el.find('.mgr-1-btn span').html());

            this._tipEl.css({
                marginTop : el.position().top
            });

            return this;
        },

        init: function(opCallback) {

            var that = this;

            $('.mgr-sidenav-area .mgr-switch').click(function() {
                that._doSwitch(!that._isOpen);
                return false;
            });

            $('.mgr-sidenav-area .mgr-btn').click(function() {

                var el     = $(this),
                    opId   = el.data('op-id'),
                    opName = el.find('span').html(),
                    listEl = el.parent('li');

                // 如果该按钮是可点击按钮，则触发点击事件；如果是菜单按钮，则展开或关闭菜单
                if (opId) {
                    opCallback && opCallback(opId, opName);

                } else {
                    // 展开边栏
                    that._doSwitch(true);
                    // 切换当前列表状态并收起所有的子列表
                    listEl.toggleClass('show').find('li').removeClass('show');
                    listEl.siblings('li').removeClass('show');
                }

                return false;
            });

            $('.mgr-sidenav-area .mgr-1-item').mouseenter(function() {

                if (!that._isOpen) {
                    that._fixTip($(this));
                    that._tipEl.show();
                }

            }).mouseleave(function() {
                that._tipEl.hide();
            });

            return this;
        }
    };

    // tab控制对象
    var tabArea = {

        _RESIZE_INTERVAL : 50, // 容器宽度变化监听的时间间隔（性能相关!!!）

        _DOM_TPL : '<a href="javascript:;" class="mgr-tab-btn mgr-tab-btn-normal">' +
                    '<span></span><i>×</i></a>',

        // DOM元素
        _tabWrapperEl   : $('.mgr-page-tab-area .mgr-tab'),
        _tabContentEl   : $('.mgr-page-tab-area .mgr-tab-content'),
        _tabHomeBtnEl   : $('.mgr-page-tab-area .mgr-tab-btn').eq(0),
        _tabOpAreaEl    : $('.mgr-page-tab-area .mgr-op'),
        _tabOpPrevEl    : $('.mgr-page-tab-area .mgr-op-btn').eq(0),
        _tabOpNextEl    : $('.mgr-page-tab-area .mgr-op-btn').eq(1),
        _tabOpCloseEl   : $('.mgr-page-tab-area .mgr-op-btn').eq(2),

        // 回调函数
        _onSwitchToHome : null,
        _onSwitchToTab  : null,

        // 滚动相关变量
        _wrapperWidth   : 0, // 当前tab区域的宽度
        _currScrollPos  : 0, // tab组的当前滚动距离
        _maxScrollPos   : 0, // tab组的最大可滚动距离
        _scrollStep     : 0, // 每次点击滚动按钮滚动的距离

        // tab切换相关变量
        _currActTabId   : null,
        _tabBtnElList   : {},

        // 获取整个列表里面的最后一个tab节点
        _getLastTabEl: function() {
            return this._tabContentEl.find('.mgr-tab-btn').last();
        },

        // 计算当前btn的左端和右端相对于列表最左侧的偏移
        _calcBtnElPosInfo: function(el) {
            return {
                left  : el.position().left,
                right : el.position().left + el.outerWidth()
            };
        },

        // 计算tab组的最大可滚动距离，更新每次滚动距离变量，并显示／隐藏操作区域
        _updateScrollInfo: function() {

            var diff = this._calcBtnElPosInfo(this._getLastTabEl()).right - this._wrapperWidth;

            if (diff > 0) {
                this._maxScrollPos = diff;
                this._tabOpAreaEl.show();
            } else {
                this._maxScrollPos = 0;
                this._tabOpAreaEl.hide();
            }

            // 每次点击滚动按钮，滚动的距离为当前宽度的3/4
            this._scrollStep = this._wrapperWidth * 3 / 4;

            return this;
        },

        // 将tab组滚动到指定位置
        _doScroll: function(scrollLeft) {

            // 防止滚动越界
            if (scrollLeft > this._maxScrollPos) {
                scrollLeft = this._maxScrollPos;
            } else if (scrollLeft < 0) {
                scrollLeft = 0;
            } else {
                // Do nothing
            }

            this._currScrollPos = scrollLeft;

            this._tabContentEl.css({
                marginLeft : -scrollLeft
            });

            return this;
        },

        // 修正滚动位置，让目标tab可以完整的显示
        _scrollToTab: function(el) {

            var posInfo = this._calcBtnElPosInfo(el);

            if (posInfo.left < this._currScrollPos) {
                this._doScroll(posInfo.left);
            } else if (posInfo.right > this._currScrollPos + this._wrapperWidth) {
                this._doScroll(posInfo.right - this._wrapperWidth);
            } else {
                // Do nothing
            }

            return this;
        },

        // 切换到目标tab
        _switchToTab: function(id) {

            // 判断目标tab是否为首页
            var el = (id === 0 ? this._tabHomeBtnEl : this._tabBtnElList[id]);

            if (this._currActTabId !== id) {
                this._currActTabId = id;
                this._tabContentEl.find('.mgr-tab-btn').removeClass('active');
                el.addClass('active');

                if (id === 0) {
                    this._doScroll(0);
                    this._onSwitchToHome && this._onSwitchToHome();
                } else {
                    this._scrollToTab(el);
                    this._onSwitchToTab && this._onSwitchToTab(id);
                }
            }

            return this;
        },

        _closeAllTab: function() {

            for (var id in this._tabBtnElList) {
                this._tabBtnElList[id].remove();
            }

            this._tabBtnElList = {};
            this._onCloseAllTab && this._onCloseAllTab();

            // 修正滚动位置
            this._updateScrollInfo()._doScroll(this._currScrollPos);

            this._switchToTab(0);

            return this;
        },

        _closeTab: function(id) {

            var el = this._tabBtnElList[id],
                index, tabEls, nextIndex;

            if (id === this._currActTabId) {
                // 如果关闭的是当前tab，则关闭tab之前，先切换到下一个tab
                // 如果当前tab是最后一个，则切换到前一个tab
                index  = el.index();
                tabEls = this._tabContentEl.find('.mgr-tab-btn');

                // 获取相邻tab的id
                if (el.index() === tabEls.length - 1) {
                    nextIndex = tabEls.eq(index - 1).data('id');
                } else {
                    nextIndex = tabEls.eq(index + 1).data('id');
                }
            }

            // 移除目标tab
            el.remove();
            delete(this._tabBtnElList[id]);
            this._onCloseTab && this._onCloseTab(id);

            // 修正滚动位置
            this._updateScrollInfo()._doScroll(this._currScrollPos);

            if (id === this._currActTabId) {
                // 如果关闭的是当前tab，则切换tab
                this._switchToTab(nextIndex);
            }

            return this;
        },

        // 打开目标tab，id为0 则切换到首页
        open: function(id, text) {

            if (id !== 0) {

                if (!this._tabBtnElList[id]) {
                    // 构造DOM节点并更新滚动info
                    this._tabBtnElList[id] = $(this._DOM_TPL).data('id', id)
                            .find('span').html(text).end().appendTo(this._tabContentEl);

                    this._updateScrollInfo();

                } else {
                    // 如果指定了text字段，则更新tab文字
                    text && this._tabBtnElList[id].find('span').html(text);
                }
            }

            return this._switchToTab(id);
        },

        init: function(onSwitchToHome, onSwitchToTab, onCloseTab, onCloseAllTab) {

            var that = this;

            this._onSwitchToTab  = onSwitchToTab;
            this._onSwitchToHome = onSwitchToHome;
            this._onCloseTab     = onCloseTab;
            this._onCloseAllTab  = onCloseAllTab;

            // 首页按钮的id为0
            this._tabHomeBtnEl.data('id', 0);

            // 容器宽度发生改变时，修正滚动
            this._tabWrapperEl.resize(function() {
                that._updateScrollInfo()._doScroll(that._currScrollPos);
            });

            // 向前翻页
            this._tabOpPrevEl.click(function() {
                that._doScroll(that._currScrollPos - that._scrollStep);
                return false;
            });

            // 向后翻页
            this._tabOpNextEl.click(function() {
                that._doScroll(that._currScrollPos + that._scrollStep);
                return false;
            });

            // 关闭所有tab
            this._tabOpCloseEl.click(function() {
                that._closeAllTab();
                return false;
            });

            // 点击切换tab
            this._tabContentEl.on('click', '.mgr-tab-btn', function() {
                that._switchToTab($(this).data('id'));
                return false;
            });

            // 关闭单个tab
            this._tabContentEl.on('click', '.mgr-tab-btn i', function(e) {
                e.stopPropagation();
                that._closeTab($(this).parent('.mgr-tab-btn').data('id'));
                return false;
            });

            // 监听容器宽度变化
            setInterval(function() {
                var wrapperWidth = that._tabWrapperEl.width();

                if (that._wrapperWidth !== wrapperWidth) {
                    that._wrapperWidth = wrapperWidth;
                    that._tabWrapperEl.resize();
                }
            }, this._RESIZE_INTERVAL);

            // 切换到首页
            return this._switchToTab(0);
        }
    };

    // iframe元素控制对象
    var iframeCtl = {

        _urlList : {
            '101' : 'http://www.huihaicenter.com/',
            '102' : 'http://www.163.com/',
            '103' : 'http://www.baidu.com/',
            '104' : 'http://www.hao123.com/',
            '105' : 'http://www.youku.com/',
            '201' : 'http://www.sina.com.cn/',
            '202' : 'http://www.sohu.com/',
            '301' : 'http://www.qq.com/',
            '302' : 'https://www.taobao.com/'
        },

        _wrapperEl : $('.mgr-page-other'),
        _elList    : {},
        _currId    : null,

        // 关闭所有iframe
        closeAll: function() {

            for (var id in this._elList) {
                this._elList[id].remove();
                delete this._elList[id];
            }

            this._elList = {};
            this._currId = null;

            return this;
        },

        // 关闭单个iframe
        close: function(id) {

            if (this._elList[id]) {
                this._elList[id].remove();
                delete this._elList[id];
            }

            return this;
        },

        open: function(id) {

            this._elList[this._currId] && this._elList[this._currId].hide();

            if (!this._elList[id]) {
                this._elList[id] = $('<iframe src="' + this._urlList[id] +
                        '" frameborder="0"></iframe>').appendTo(this._wrapperEl)
                        .attr('style', 'display:block;');
            } else {
                this._elList[id].attr('style', 'display:block;');
            }

            this._currId = id;

            return this;
        }
    };

    // 页面主逻辑
    sideNav.init(function(opId, opName) {
        tabArea.open(opId, opName);
    });

    tabArea.init(function() {
        // 显示首页
        $('.mgr-page-content-area .mgr-page-other').hide();
        $('.mgr-page-content-area .mgr-page-home').show();

    }, function(id) {
        // 执行id操作
        iframeCtl.open(id);
        $('.mgr-page-content-area .mgr-page-other').show();
        $('.mgr-page-content-area .mgr-page-home').hide();

    }, function(id) {
        // 关闭id的iframe
        iframeCtl.close(id);

    }, function() {
        // 关闭所有iframe
        iframeCtl.closeAll();
    });

});
